<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        /* p{
            border: 1px solid #000;
        }
        b{
            border: inherit;
        } */
        /* *{
            border: 1px solid #000;
        } */
/* 
        #myp{
            border: 10px dashed red;
        }
        p.myclass{
            background-color: aquamarine;
            
        }
        .myclass2{
            border: 5px solid #000;
        }

        [href] {
            color: yellow;
        }
        [type="password"] {
            border: 10px solid #000;
        }
        [href^="ftp"]{
            color: maroon;
        }

        [href$="cn"]{
            color: pink;
        }
        [href*="baidu"]{
            color: green;
        } */
       /*  p,div{
            border: 1px solid #000;
        } */
/* 子选择器 */
       /*  div > b {
            color: red;
        } */
/* 后代选择器 */
       /*  div b {
            color: red;
        } */
        /* 兄弟选择器选择的不是你，而是你的兄弟 */
        /* p+b{
            border: 1px double firebrick;
        } */
       /*  p~b{
            border: 1px double firebrick;
        } */
       /*  ::first-letter{
            font-size: 45px;
        } */
       /*  ::first-line{
            color: forestgreen;
        } */
       /*  ::before{
            content: '伟人说：';
        } */
        /* 在css中 有继承的关系 */
        /* :root{
            background: #000; 
            border: 1px solid #000;
        } */
        /* ul > li:first-child{
            border: 1px solid #000;
        } */
        /* ul > li:last-child{
            border: 1px solid #000;
        } */
       /*  ul > li:only-child{
            border: 1px solid #000;
        } */
        /* div>span:only-of-type{
            color: red;
        } */
        /* ul>li:nth-child(4){
            border: 1px solid #000;
        } */
        /* :enabled{
            border: 5px solid darkgreen;
        }
        :disabled{
            border: 1px solid red;
        }
        :checked{
            display: none;
        }
        :valid{
            color: green;
        }
        :invalid{
            color: red;
        } */
       /*  a:link{
            color: red;
        }
        a:hover{
            color: green;
        }
        a:active{
            color: yellow;
        }
        a:visited{
            color: gray;
        } */
        /* :focus{
            border: 5px solid #000;
        } */
        /* a:not([href*="baidu"]){
            color: red;
        } */
        /* :empty{
            display: none;
        } */

        ::selection{
            /* color: green; */
            /* background-color: green; */
            /* background-color: rgb(255, 255, 0); */
            /* background-color: #ff0000; */
            background-color: rgba(255, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <p>这是<b>HTML5</b></p>
    <!-- id 身份证 :在一个网页中只能有一个,不要重名-->
   <!--  <p id="myp">dfsdfsdf</p> -->
    <!-- 如果在css中重名也能选得到，但是在js的时候就会出现问题.所以请遵守id不能重名的规范 -->
    <!-- <p id="myp">dfsdfsdf</p>
    <p id="myp">dfsdf</p> -->
    <!-- p.myclass -->
    <p class="myclass myclass2">都是对的 </p>
    <p class="myclass">都是对的 </p>
    <p class="myclass">都是对的 </p>
    <p>都是对的 </p>
    <p>都是对的 </p>
    <div class="myclass">dfdf</div>
    
    <a href="">111</a>
    <a >222</a>
    <a >333</a>

    <input type="text" name="" id="">
    <input type="password" name="" id="">

    <a href="http://www.163.com">111</a>
    <a href="ftp://www.163.com">222</a>
    <a href="https://www.163.cn">333</a>
    <a href="http://www.baidu.com">111</a>
    <div>
        <span>
            <b>加粗</b>
        </span>
        <b>加粗</b>
    </div>
    <p>1</p>
    <b>2</b>
    <p>3</p>
    <b>4</b>
    <b>5</b>
    <p>6</p>

    <p>   下面的两种方式 就是研究如何把控 制网下面的两种方式 就是研究如何把控 制网下面的两种方式 就是研究如何把控 制网下面的两种方式 就是研究如何把控 制网页的格式的css 部分从html中分 离出来。</p>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <ul>
        <li>only</li>
    </ul>

    <div>
        <p>p1</p>
        <span>span2</span>
        <span>span3</span>
    </div>
    <input type="text" name="" id="" disabled>
    <input type="checkbox" name="" id="">
    <input type="email" name="" id="">

    <a href="http://ggg.clom">11</a>
    <a href="">2</a>
    <a href="">3</a>
    <a href="">4</a>
    <p></p>
    <span>111</span>
</body>
</html>